<template>
  <div class="body">
    <div class="left">
      <div id="listTop">
        <a-button @click="createAs">
          <PlusCircleFilled />
          <span style="margin-left: 10px">新建文章</span>
        </a-button>
      </div>
      <a-list
        id="AsList"
        size="large"
        bordered
        :data-source="listData"
        :pagination="pagination"
      >
        <template #renderItem="{ item }">
          <a-list-item id="list" tabindex="1" v-if="item.filename == fileType">
            <div id="listLeft" @click="AsList(item)">
              <a-tag color="green" v-if="item.type">已发布</a-tag>
              <a-tag color="blue" v-else>未发布</a-tag>
              <span>{{ item.title }}</span>
            </div>
            <a-dropdown :trigger="['click']">
              <a class="ant-dropdown-link" @click.prevent>
                <SettingFilled />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="deleteAs(item)">删除</a-menu-item>
                  <a-sub-menu title="移动至">
                    <a-menu-item
                      v-for="(arr, index) in arrangeList"
                      :key="index"
                      @click="changeArrange(arr, item)"
                    >
                      {{ arr.filename }}
                    </a-menu-item>
                  </a-sub-menu>
                </a-menu>
              </template>
            </a-dropdown>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div class="right">
      <E v-if="AsCheck"></E>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { PlusCircleFilled, SettingFilled } from "@ant-design/icons-vue";
import E from "./wangEditor.vue";
import { message } from "ant-design-vue";
import {
  putArticleList,
  getArticleList,
  deleteArticle,
  getArticle,
  changeArr,
} from "../../api/create";
import VueEvent from "../../utils/event";
import { formatTime } from "../../utils/date";
import { useRoute } from "vue-router";

export default defineComponent({
  setup() {
    const listData = ref([]);
    const AsCheck = ref(false);
    const arrangeList = ref([{ filename: "未分类" }]);
    const route = useRoute();
    const fileType = ref(route.query.fileType);

    const createAs = () => {
      let dateNow = formatTime();
      putArticleList({
        url: "/create/putArticleList",
        title: dateNow,
        success: (res) => {
          // console.log(res);
          message.info(res.data);
          location.reload();
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const deleteAs = (item) => {
      // console.log(item.title);s
      deleteArticle({
        url: "/create/deleteArticle",
        aid: item.aid,
        success: () => {
          // console.log(res);
          location.reload();
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    getArticleList({
      url: "/create/getArticleList",
      success: (res) => {
        // console.log(res);
        for (let i = 0; i < res.data.AsList.length; i++) {
          listData.value.push({
            aid: res.data.AsList[i].aid,
            title: res.data.AsList[i].title,
            type: res.data.AsList[i].type,
            filename: res.data.AsList[i].filename,
          });
        }
        for (let i = 0; i < res.data.filename.length; i++) {
          arrangeList.value.push({
            filename: res.data.filename[i].fileName,
          });
        }
        // console.log(listData.value);
      },
      err: (err) => {
        console.log(err);
      },
    });

    const changeArrange = (arr, item) => {
      // console.log(arr);
      changeArr({
        url: "/create/changeArr",
        filename: arr.filename,
        aid: item.aid,
        success: () => {
          location.reload();
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const AsList = (item) => {
      AsCheck.value = true;
      getArticle({
        url: "/create/getArticle",
        aid: item.aid,
        success: (res) => {
          // console.log(res.data);
          VueEvent.emit("AsBody", {
            aid: item.aid,
            AsTitle: res.data.title,
            content: res.data.content,
            intr: res.data.intr,
          });
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const pagination = {
      onChange: (page) => {
        console.log(page);
      },
      pageSize: 7,
      size: "small",
      showQuickJumper: true,
    };

    return {
      listData,
      pagination,
      createAs,
      AsList,
      deleteAs,
      AsCheck,
      arrangeList,
      changeArrange,
      fileType,
    };
  },

  components: {
    PlusCircleFilled,
    SettingFilled,
    E,
  },
});
</script>
        
<style scoped>
.body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.left {
  width: 30%;
  max-height: 100%;
}
#listTop {
  height: 50px;
  width: 100%;
  padding: 10px 0 0 10px;
  border: 1px solid rgb(228, 228, 228);
}
#list {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#list:hover {
  background: #edf9ff;
}
#list:focus {
  background: #edf9ff;
}
#listLeft :hover {
  color: #005177;
  cursor: pointer;
}
.right {
  width: 70%;
  height: auto;
  padding: 20px;
  /* background: rgb(60, 209, 92); */
}
</style>
